
<script src="../../resources/utils/formatDate.js"></script>

<link href="../css/content.css" rel="stylesheet">

<div class="container">
	<div class="page-header">
		<h1>User Manager</h1>
	</div>

	<div id="User_tt" class="easyui-tabs" data-options="tabWidth:118"
		style="height: 780px">
		<div title="User List">

			<form class="form-inline" method="post" id="user_search_form"
				style="padding: 8px;">

				<div class="form-group my-form-group" style="width: 36%;">
					<label for="formUserAccount" style="width: 22%; text-align: right;">编码:</label>
					<input type="text" class="form-control" style="width: 76%;"
						placeholder="user accout" id="formUserAccount">
				</div>

				<div class="form-group my-form-group" style="width: 36%;">
					<label for="formUsername" style="width: 22%; text-align: right;">名称:</label>
					<input type="text" class="form-control" style="width: 76%;"
						placeholder="user name" id="formUsername">
				</div>
				
				<div class="form-group my-form-group" style="width: 36%;margin-top:8px;">
					<label for="validStart" style="width: 22%; text-align: right;">帐户开始时间:</label>
					<input id="formValidStart" type="text" class="easyui-datebox" style="width: 76%;height:32px;">
				</div>

				<div class="form-group my-form-group" style="width: 36%;margin-top:8px;">
					<label for="validEnd" style="width: 22%; text-align: right;">帐户结束时间:</label>
					<input id="formValidEnd" type="text" class="easyui-datebox" style="width: 76%;height:32px;">
				</div>

				<div class="form-group my-form-group form-search-btn-group"
					style="width: 20%; text-align: center;">
					<button type="submit" class="btn btn-success">
						<i class="fa fa-search"></i> Search
					</button>
					<button type="submit" class="btn btn-success">
						<i class="fa fa-undo"></i> Reset
					</button>
				</div>

			</form>

			<div
				style="padding: 8px 3px; margin: 6px; height: 36px; display: inline">
				<button class="btn btn-success actionbtn" type="button" id="user_create">
					<i class="fa fa-plus"></i> 新增
				</button>
				<button class="btn btn-success optionbtn l-btn-disabled" id="user_remove"
					type="button">
					<i class="fa fa-remove fa-trash-o fa-lg" aria-hidden="true"></i> 删除
				</button>
				<a href="javascript:void(0)" id="user_modal_submit"
					class="btn btn-primary formbtn l-btn-disabled"
					><i
					class="fa fa-save fa-trash-o fa-lg"></i> Save</a> 

				<div class="btn-group actionbtn">
					<a href="javascript:;" class="btn btn-primary"><i
						class="fa fa-file-excel-o"></i> 导入导出</a> <a href="javascript:;"
						data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
						aria-expanded="false"> <span class="fa fa-caret-down"></span></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:;"><i class="i"></i> 导出Excel</a></li>
						<li><a href="javascript:;"><i class="i"></i> 下载Excel模板</a></li>
						<li class="divider"></li>
						<li><a href="javascript:;"><i class="i"></i> 导入Excel</a></li>
					</ul>
				</div>
			</div>
			<div id="user_list" style="margin: 6px; border: 1px solid #EEEEEE;">
			</div>
		</div>
	</div>
</div>

<!-- user roles 行模板 -->
<script type="text/x-handlebars-template" id="user_roles_info_template">
	<tr data-id="{{id}}" id="user_roles_{{id}}" data-name="{{roleName}}">
		<td>
			<label class="checkbox-inline"> 
				<input type="hidden" name="roleId" id="roleId" value="{{roleId}}">&nbsp;
				<input type="hidden" name="userId" id="userId" value="{{userId}}">
				<input type="checkbox" id="id" name="id" value="{{id}}" onchange="validateRemoveBtn()">
			</label>
		</td>
		<td data-id="{{roleName}}" data-name="roleName">{{roleName}}</td>
		<td data-id="{{roleCode}}" data-name="roleCode">{{roleCode}}</td>
		<td data-name="roleDesc">{{roleDesc}}</td>
	</tr>
</script>

<!-- roles 行模板 -->
<script type="text/x-handlebars-template" id="roles_info_template">
	<tr data-id="{{roleId}}" id="role_{{roleId}}" data-name="{{roleId}}">
		<td>
			<label class="checkbox-inline">&nbsp;
				<input type="hidden" name="userId" id="userId" value="{{userId}}">
				<input type="checkbox" id="roleId" name="roleId" value="{{roleId}}"
					onclick="addUserRole(this)">
			</label>
		</td>
		<td data-id="{{roleName}}" data-name="roleName">{{roleName}}</td>
		<td data-id="{{roleCode}}" data-name="roleCode">{{roleCode}}</td>
		<td data-name="roleDesc">{{roleDesc}}</td>
	</tr>
</script>

<script type="text/x-handlebars-template-partial" id="user_roles_table_template">
	
<div style="margin: 8px;">
	<div class="page-header">
		<h5>角色信息</h5>
	</div>
	<div style="" class="my-form-group-row">
		<span class="form-group my-form-group" style="width: 38%;"> 
		<label for="userAccount" style="">登陆帐号:</label> 
			<span>{{userAccount}}</span>
			<input type="hidden" name="curEditorUserAccount" id="curEditorUserAccount" value="{{userAccount}}"/>
			<input type="hidden" name="curEditorUserId" id="curEditorUserId" value="{{userId}}"/>
		</span> 
		<span class="form-group my-form-group" style="width: 38%;"> 
		<label
			for="username" style="width: 18%; text-align: right;">用户姓名:</label> <span>{{username}}</span>
		</span>
	</div>
</div>

<div id="UserRole_Item_{{userAccount}}"
	style="height: auto; margin: 6px;">
	
	<button class="btn btn-success userRoleOptionBtn l-btn-disabled" id="userRoles_remove"
					type="button">
		<i class="fa fa-remove fa-trash-o fa-lg" aria-hidden="true"></i> 删除
	</button>

	<!--<button class="btn btn-success itemFormActionbtn l-btn-disabled"
		type="button" onclick="userItemSave()">
		<i class="fa fa-save" aria-hidden="true"></i> 保存
	</button>-->

	<button class="btn btn-success actionbtn" type="button"
		onclick="userItemBack()">
		<i class="fa fa-reply" aria-hidden="true"></i>&nbsp;返回
	</button>
</div>
<div id="UserRole_Item_{{userAccount}}_grid" class="{{userAccount}}" style="height:100%;">
	<table style="width:100%;height:100%;">
		<tr>
			<td>用户角色</td>
			<td>&nbsp;</td>
			<td>系统角色</td>
		</tr>
		<tr>
			<td style="width:50%;padding:0;" align="left" valign="top">
				<table class="table table-hover"
					id="user_roles_{{userAccount}}_table">
					<thead>
						<tr>
							<th>选择</th>
							<th>角色名称 <span class="required">*</span></th>
							<th data-id="{{roleCode}}" data-name="roleCode">角色编码</th>
							<th>角色说明</th>
						</tr>
					</thead>
					<tbody>
						{{#if data}} {{#data}} {{> tr}} {{/data}} {{else}}
						<div class="alert alert-warning">Can not find any data!</div>
						{{/if}}
					</tbody>
					<tfoot>
					</tfoot>
				</table>
			</td>

			<td style="background: #f0f2f8; text-align: center;width:38px;" align="center" valign="middle">
				&nbsp;
			</td>

			<td style="width:50%;padding:0;" align="left" valign="top">
				<table class="table table-hover"
					id="roles_{{userAccount}}_table">
					<thead>
						<tr>
							<th>选择</th>
							<th>角色名称 <span class="required">*</span></th>
							<th data-id="{{roleCode}}" data-name="roleCode">角色编码</th>
							<th>角色说明</th>
						</tr>
					</thead>
					<tbody>
						{{#if data}} {{#data}} {{> tr}} {{/data}} {{else}}
						<div class="alert alert-warning">Can not find any data!</div>
						{{/if}}
					</tbody>
					<tfoot>
					</tfoot>
				</table>
			</td>
		</tr>
	</table>
</div>

</script>

<!-- 分页组件 -->
<script type="text/x-handlebars-template-partial"
	id="user_table_pager_template">
	<tr id="user_pager_template">
		<th colspan="5"><span>1</span> <span>...</span> <span>12</span> <span>13</span>
			<span>14</span> <span>15</span> <span>16</span> <span>...</span> <span>116</span>
			<span>&nbsp;</span> <span>{{totalRows}}</span> <span>/</span> <span>{{totalPage}}</span>
		</th>
		<th colspan="5">&nbsp;</th>
	</tr>
</script>

<!-- 用户列表******表头 -->
<script type="text/x-handlebars-template" id="user_table_template">
	<table class="table table-hover" id="user_table">
		<thead>
			<tr>
			  <th>选择</th>
			  <th>登陆帐号 <span class="required">*</span></th>
			  <th>用户姓名 <span class="required">*</span></th>
			  <th>用户描述</th>
			  <th style="width:60px;">状态</th>
			  <th>排序码</th>
			  <th>用户部门</th>
			  <th>职位</th>
			  <th style="width:120px;" colspan="2">帐号有效期</th>
			  <th>创建用户</th>
			  <th>创建时间</th>
			  <th>最后更新用户</th>
			  <th>最后更新时间</th>
			  <th>角色</th>
			  <th>密码</th>
			  <th>编辑</th>
		  	</tr>
		</thead>
		<tbody>
			{{#if data}}
			{{#data}}
            {{> tr}}
            {{/data}}
			{{else}}
        		<div class="alert alert-warning">Can not find any data!</div>
    		{{/if}}
		</tbody>
		<tfoot>
		</tfoot>
	</table>
</script>

<!-- 用户-表格行模板-无编辑框 -->
<script type="text/x-handlebars-template-partial"
	id="user_table_tr_template">
	<tr data-id="{{userId}}" data-name="userId" class="user_tr_template">
		<td>
			<form>
			<label class="checkbox-inline"> 
				<input type="checkbox" onclick="validateUserRemoveBtn()" name="userId" id="userId" value="{{userId}}">
			</label>
			</form>
		</td>
		<td data-id="{{userAccount}}" data-name="userAccount">{{userAccount}}</td>
		<td data-id="{{username}}" data-name="username">{{username}}</td>
		<td>{{userDesc}}</td>
		<td>{{userEnabled}}</td>
		<td>{{orderCode}}</td>
		<td>{{userDept}}</td>
		<td>{{userDuty}}</td>
		<td>{{validStart}} - </td>
		<td>
			{{validEnd}}
		</td>
		<td>{{createdUser}}</td>
		<td>{{createdDate}}</td>
		<td>{{updateLastUser}}</td>
		<td>{{updateLastDate}}</td>
		<td>
			<button class="btn btn-xs btn-primary user_roles_editor" title="Edit user roles">
				<i class="fa fa-list"></i>
			</button></td>
		<td>
			<button class="btn btn-xs btn-primary user_edit_cancel" title="cancel edit">
				<i class="fa fa-key fa-fw"></i>
			</button></td>
		<td>
			<button class="btn btn-xs btn-primary user_edit" title="edit user info">
				<i class="fa fa-edit"></i>
			</button>
		</td>
	</tr>
</script>

<!-- 用户******行编辑模板 -->
<script type="text/x-handlebars-template" id="user_modal_form_template">
    <tr data-id="{{userId}}" data-name="userId" class="user_form_template">
		<td>
			<label class="checkbox-inline"> 
				<input type="hidden" name="userId" id="userId" value="{{userId}}">
			</label>
		</td>
		<td><input type="text" class="form-control" name="userAccount" id="userAccount" value="{{userAccount}}" size="8"></td>
		<td><input type="text" class="form-control" name="username" id="username" value="{{username}}" size="8"></td>
		<td><input type="text" class="form-control" name="userDesc" id="userDesc" value="{{userDesc}}"></td>
		<td><input type="checkbox" class="form-control" name="userEnabled" id="userEnabled" value="{{userEnabled}}"></td>
		<td><input type="text" class="form-control" name="orderCode" id="orderCode" value="{{orderCode}}" size="3"></td>
		<td><input type="text" class="form-control" name="userDept" id="userDept" value="{{userDept}}"></td>
		<td><input type="text" class="form-control" name="userDuty" id="userDuty" value="{{userDuty}}"></td>
		<td>{{validStart}} - </td>
		<td>
			<input id="validEnd" class="form-control" type="text" class="easyui-datebox" style="width:86px;height:32px;">
		</td>
		<td>{{createdUser}}
			<input type="hidden" name="createdUser" id="createdUser" value="{{createdUser}}">
		</td>
		<td>{{createdDate}}
			<input type="hidden" name="createdDate" id="createdDate" value="{{createdDate}}">
		</td>
		<td>{{updateLastUser}}
			<input type="hidden" name="updateLastUser" id="updateLastUser" value="{{updateLastUser}}">
		</td>
		<td>{{updateLastDate}}
			<input type="hidden" name="updateLastDate" id="updateLastDate" value="{{updateLastDate}}">
		</td>
		<td colspan="3">
			<button class="btn btn-xs btn-primary user_edit_cancel" title="cancel">
				<i class="fa fa-remove"></i>
			</button>
		</td>
	</tr>
</script>


<script src="../global.js"></script>
<script src="UserView.js"></script>
<script src="UserService.js"></script>
<script src="roles/UserRolesView.js"></script>
<script src="roles/UserRolesService.js"></script>

<!-- user classify script -->
<script type="text/javascript" src="UserMgr.js">
</script>

<style type="text/css">
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
    margin-left: -20px;
    position: absolute;
}
</style>

